<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2. 怎么给webgl绘制加速-减少 CPU 计算次数</title>
    <style>
        canvas{
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>

     <canvas width="600" height="600"></canvas>
     <script src="/common/lib/gl-renderer.js"></script>
    <script type="module">
        
        // 生成随机的三角形顶点
        function randomTriangle(x = 0, y = 0, rotation = 0.0, radius = 0.1 ){
            const a = rotation;
            const b = a + 2 * Math.PI / 3;
            const c = a + 4 * Math.PI / 3;

            return [
                [x +  radius * Math.cos(a), y +  radius * Math.sin(a)],
                [x +  radius * Math.cos(b), y +  radius * Math.sin(b)],
                [x +  radius * Math.cos(c), y +  radius * Math.sin(c)],
            ]
        }

        let canvas = document.querySelector("canvas");

        const renderer = new GlRenderer(canvas);

        (async function(){
           
            const vertex = /* glsl */ `
            precision highp float;
            
            attribute vec2 a_vertexPosition;
            uniform mat3 modelMatrix;
            
            void main() {
                vec3 pos = modelMatrix * vec3(a_vertexPosition, 1);
                gl_Position = vec4(pos, 1);
            }
            `;
            
            const fragment = /* glsl */ `
                precision highp float;  

                uniform vec4 u_color;
                
                void main() {    
                    gl_FragColor = u_color;  
                }
            `;
            
            const program = renderer.compileSync(fragment, vertex);
            renderer.useProgram(program);
            
            const alpha = 2 * Math.PI / 3;
            const beta = 2 * alpha;

            renderer.setMeshData([{ 
                positions:[
                    [0, 0.1], 
                    [0.1 * Math.sin(alpha), 0.1 * Math.cos(alpha)], 
                    [0.1 * Math.sin(beta), 0.1 * Math.cos(beta)],
                ]
            }]);


            const COUNT = 3000;
            function render() {
                for(let i = 0; i < COUNT; i++) {
                    const x = 2 * Math.random() - 1;
                    const y = 2 * Math.random() - 1;
                    const rotation = 2 * Math.PI * Math.random();

                    renderer.uniforms.modelMatrix = [
                        Math.cos(rotation), -Math.sin(rotation), 0,
                        Math.sin(rotation), Math.cos(rotation), 0,
                        x, y, 1,
                    ];

                    renderer.uniforms.u_color = [
                        Math.random(),
                        Math.random(),
                        Math.random(),
                        1
                    ];

                    renderer._draw();
                }
                requestAnimationFrame(render);
            }

            render();

        })()

    </script>
</body>
</html>